<template>
  <div class="header">
    <div class="collapse-btn" @click="collapseChage"></div>
    <div class="logo">江西省水土保持监测站点监测管理系统</div>
    <div class="header-right">
      <div class="header-user-con">
        <div>
          <span style="color: #fff"> 消息提醒 </span>
        </div>

        <div class="split-line"></div>
        <!-- <div style="padding-left:20px;cursor:pointer" @click="chpwd">
					<span style="color:#fff">
						切换平台
					</span>
				</div> -->
        <div class="user-avator">
          <img src="../../assets/img/img.png" />
        </div>
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ username }}
            <i class="el-icon-caret-bottom"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item divided command="xiugaimima">修改密码</el-dropdown-item>
              <el-dropdown-item divided command="qiehuanpingtai">切换平台</el-dropdown-item>
              <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <el-dialog title="上报信息" v-model="dialogVisible" width="400px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="年度">
          <el-date-picker v-model="newyear" value-format="YYYY" type="year" placeholder="选择年"> </el-date-picker>
        </el-form-item>
        <el-form-item label="系统类型">
          <el-select v-model="systype" @change="comStation" placeholder="请选择">
            <el-option label="径流小区" value="1"> </el-option>
            <el-option label="小流域" value="2"> </el-option>
            <!-- <el-option
                        label="区域水土流失动态监测"
                        value="3">
                    </el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="测站">
          <el-select v-model="stcd" placeholder="请选择活动区域">
            <el-option v-for="item in stationData" :key="item.value" :label="item.stnm" :value="item.stcd"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="suresel">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="修改密码" v-model="pwdlog" width="400px">
      <el-form ref="pwdform" :model="pwdform" label-width="80px">
        <el-form-item label="旧密码">
          <el-input v-model="pwdform.oldPassword" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="pwdform.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="chpwd">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
//chpwd
import md5 from 'js-md5';
import bus from '../common/bus';
import { soilwatersysusereditmodifyPassword, viewPageStationInfo, reportareaInfoviewlistStationArea } from '../../api/index';
export default {
  data() {
    return {
      pwdlog: false,
      systype: '1',
      stcd: '',
      newyear: '',
      pwdform: {
        userNo: localStorage.getItem('nowuserno')
      },
      form: {
        year: ''
      },
      dialogVisible: false,
      collapse: true,
      fullscreen: false,
      name: '',
      message: 2,
      stationData: [],
      globalyear: '',
      stationInfo: {},
      AllstationData: []
    };
  },
  computed: {
    username() {
      let username = localStorage.getItem('ms_username');
      return username ? username : this.name;
    }
  },
  methods: {
    qiehuan() {
      this.$router.push('/shishijiangyu');
    },
    chpwd() {
      let that = this;

      soilwatersysusereditmodifyPassword({
        oldPassword: md5(that.pwdform.oldPassword),
        newPassword: md5(that.pwdform.newPassword),
        userNo: that.pwdform.userNo
      })
        .then((e) => {
          that.pwdlog = false;
          that.$message.success('操作成功');
        })
        .catch((err) => {
          console.log(err);
        });
    },
    qiehuanbtn() {
      this.systype = systype;

      this.stationInfo = stationInfo;

      this.form.year = globalyear + '';
      this.stcd = stationInfo.stcd;
      this.newyear = globalyear + '';

      this.dialogVisible = true;
      this.newyear = this.form.year;
    },
    suresel() {
      systype = this.systype;
      localStorage.setItem('systype', systype);
      this.form.year = this.newyear;
      let data = this.stationData.filter((item) => {
        return item.stcd === this.stcd;
      })[0];

      stationInfo = {
        calculator: this.stationData.filter((item) => {
          return item.stcd === this.stcd;
        })[0].calculator,
        reviewer: this.stationData.filter((item) => {
          return item.stcd === this.stcd;
        })[0].reviewer,
        observer: this.stationData.filter((item) => {
          return item.stcd === this.stcd;
        })[0].observer,
        stcd: this.stcd,
        stnm: this.stationData.filter((item) => {
          return item.stcd === this.stcd;
        })[0].stnm,
        observerName: this.stationData.filter((item) => {
          return item.stcd === this.stcd;
        })[0].observerName,
        reviewerName: this.stationData.filter((item) => {
          return item.stcd === this.stcd;
        })[0].reviewerName,
        calculatorName: this.stationData.filter((item) => {
          return item.stcd === this.stcd;
        })[0].calculatorName
      };
      this.stationInfo.stnm = stationInfo.stnm;
      globalyear = this.form.year;

      localStorage.setItem('globalyear', globalyear);
      localStorage.setItem('stationInfo', JSON.stringify(stationInfo));
      this.dialogVisible = false;

      location.href = location.origin + location.pathname + '#/mapindex';
      location.reload();
    },
    getxiaoqu() {
      reportareaInfoviewlistStationArea({
        pageSize: 100,
        currentPage: 1,
        stcd: stationInfo.stcd
      })
        .then((e) => {
          sessionStorage.setItem('xiaoquxinxi', JSON.stringify(e.object));
        })
        .catch((err) => {
          console.log(err);
        });
    },
    comStation(on) {
      if (this.systype == 3) {
        this.$router.push('/shishijiangyu');
        // let url=location.origin+location.pathname

        // window.location.href="http://10.36.15.23:8888/sbsj/web/#/home?token="+sessionStorage['token']+'&urlpath='+encodeURIComponent(url)
        return;
      }
      this.stationData = this.AllstationData.filter((item) => {
        return item.stType == this.systype;
      });

      if (on) {
        this.stcd = '';
      }
    },
    getstationData() {
      let data = {
        currentPage: 1,
        pageSize: 1000
      };
      let that = this;
      let stcdList = JSON.parse(localStorage.getItem('stcdList'));
      viewPageStationInfo(data).then((res) => {
        for (let i = 0; i < stcdList.length; i++) {
          for (let j = 0; j < res.object.dataList.length; j++) {
            if (stcdList[i].stcd == res.object.dataList[j].stcd && stcdList[i].stType == res.object.dataList[j].stType) {
              that.AllstationData.push(res.object.dataList[j]);
            }
          }
        }

        that.comStation();
      });
    },
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == 'qiehuanpingtai') {
        window.location.href = 'http://120.203.64.203:5888/stbc/web/#/pageselect?token=' + sessionStorage.getItem('token');

        return;
      }
      if (command == 'loginout') {
        localStorage.removeItem('ms_username');
        sessionStorage.removeItem('token');
        sessionStorage.removeItem('menuList');
        sessionStorage.removeItem('userInfo');
        window.location.href = globalVar.tiaozhuanUrl;
      } else {
        this.pwdlog = true;
      }
    },
    // 侧边栏折叠
    collapseChage() {
      this.collapse = !this.collapse;
      bus.emit('collapse', this.collapse);
    },
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  },
  mounted() {
    this.systype = systype;
    if (!sessionStorage['token']) {
      this.$router.push({
        path: '/login'
      });
    }
    this.stationInfo = stationInfo;
    this.getxiaoqu();
    console.log(globalyear, '????????????????????????????????????????????????????????????');
    this.form.year = globalyear;
    this.stcd = stationInfo.stcd;
    this.newyear = globalyear;
    let that = this;
    setTimeout(function () {
      that.getstationData();
    }, 2000);

    if (document.body.clientWidth < 1500) {
      //this.collapseChage();
    }
  }
};
</script>
<style scoped>
.split-line {
  width: 2px;
  height: 20px;
  background: #ffffff;
  border-radius: 1px;
  margin-left: 24px;
  margin-top: 2px;
}
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 16px;
  color: #fff;
}
.collapse-btn {
  float: left;
  width: 60px;
  cursor: pointer;
  height: 70px;
  background: url(./wasicon.png) no-repeat center;
  background-size: 34px auto;
}
.header .logo {
  font-size: 34px;
  float: left;
  width: 532px;
  line-height: 70px;
  color: #fff;
  font-family: dabiaoti;
}
.header-right {
  float: right;
  padding-right: 50px;
}
.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}
.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}
.btn-bell-badge {
  position: absolute;
  right: 0;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}
.btn-bell .el-icon-bell {
  color: #fff;
}
.user-name {
  margin-left: 10px;
}
.user-avator {
  margin-left: 20px;
}
.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.el-dropdown-link {
  color: #fff;
  cursor: pointer;
}
.el-dropdown-menu__item {
  text-align: center;
}
</style>
